<template>
  <el-row id="home">
    <Header :actNva="actNva" />
    <el-col class="center">
      <!-- <Banner :infor="infor" :type="actNva" /> -->
      <Banner  :infor="infor" :type="actNva"/>
      <el-col class="tab">
        <div class="tabBtn">
          <div :class="[tabAct == 1 ? 'item act' : 'item']" @click="changeTab(1)">名师班课</div>
          <div :class="[tabAct == 2 ? 'item act' : 'item']" @click="changeTab(2)">升学规划</div>
          <div :class="[tabAct == 3 ? 'item act' : 'item']" @click="changeTab(3)">讲座预约</div>
          <div :class="[tabAct == 4 ? 'item act' : 'item']" @click="changeTab(4)">个性化一对一</div>
        </div>
        <div class="content content1" v-show="tabAct == 1">
          <div class="filtrate">
            <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              placeholder="年级 / 科目"
            ></el-cascader>
          </div>
          <el-scrollbar style="height: 480px">
            <div class="list">
              <div class="item" v-for="item in classData" :key="item.id">
                <div class="left">
                  <img :src="item.img" alt srcset />
                </div>
                <div class="right">
                  <div>课程名称：{{item.title}}</div>
                  <div>
                    授课老师：{{item.teacher}}
                    <el-tag class="places" size="mini">{{item.minge}}</el-tag>
                  </div>
                  <div>日期：{{item.data}} 地址：{{item.area}}</div>
                  <div>学费：{{item.price}}</div>
                  <div class="statusBox">
                    <el-link
                      :underline="false"
                      target="_blank"
                      :href="item.href"
                      :class="[3 == 3 ? 'status status0' : 'status']"
                      size="mini"
                    >{{item.submit}}</el-link>
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="content content2" v-show="tabAct == 2">
          <div class="list" v-for="(item, index) in tablist" :key="index">
            <div class="title">
              <div class="fir">{{ item.title }}</div>
              <div class="sec">{{ item.enTitle }}</div>
            </div>
            <div class="img">
              <img :src="tabImg[index]" alt />
            </div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
        <div class="content content3" v-show="tabAct == 3">
          <div class="box">
            <div class="title">预约讲座</div>
            <div class="list">
              <div class="items">
                <div class="left">
                  <div>北京小升初四大奥数杯赛</div>
                  <div>讲座日期：2021年2月19日20:00</div>
                  <div>讲座类型：学科讲解</div>
                </div>
                <div class="right">
                  <img src="../assets/images/home/img1.png" width="54" alt />
                  <div class="name">轩轩老师</div>
                </div>
                <div class="bottom">
                  <div
                    class="btn btn1"
                    @click="toHref"
                    :underline="false"
                    target="_blank"
                    href="http://unclesamedu.mikecrm.com/Nr18M07"
                  >课程咨询</div>
                  <div
                    class="btn btn2"
                    @click="toHref"
                    :underline="false"
                    target="_blank"
                    href="http://unclesamedu.mikecrm.com/Nr18M07"
                  >预约试听</div>
                </div>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="title">往期精彩回顾</div>
            <div class="list">
              <div class="items">
                <div class="left">
                  <div>小升初如何实现跨区</div>
                  <div>讲座日期：2021年2月9日10:00</div>
                  <div>讲座类型：政策解读</div>
                </div>
                <div class="right">
                  <img src="../assets/images/home/img2.png" width="54" alt />
                  <div class="name">夏老师</div>
                </div>
                <div class="bottom">
                  <div class="icon">
                    <img src="../assets/images/home/videoIcon.png" alt srcset />365人已观看
                  </div>
                  <div
                    class="btn btn1"
                    @click="toHref"
                    :underline="false"
                    target="_blank"
                    href="http://unclesamedu.mikecrm.com/Nr18M07"
                  >观看回放</div>
                </div>
              </div>
              <div class="items">
                <div class="left">
                  <div>朝阳小升初专项讲座</div>
                  <div>讲座日期：2021年2月3日16:00</div>
                  <div>讲座类型：政策解读</div>
                </div>
                <div class="right">
                  <img src="../assets/images/home/img2.png" width="54" alt />
                  <div class="name">夏老师</div>
                </div>
                <div class="bottom">
                  <div class="icon">
                    <img src="../assets/images/home/videoIcon.png" alt srcset />190人已观看
                  </div>
                  <div
                    class="btn btn1"
                    @click="toHref"
                    :underline="false"
                    target="_blank"
                    href="http://unclesamedu.mikecrm.com/Nr18M07"
                  >观看回放</div>
                </div>
              </div>
              <div class="items">
                <div class="left">
                  <div>北京奥数杯赛</div>
                  <div>讲座日期：2021年2月1日16:00</div>
                  <div>讲座类型：政策解读</div>
                </div>
                <div class="right">
                  <img src="../assets/images/home/img2.png" width="54" alt />
                  <div class="name">夏老师</div>
                </div>
                <div class="bottom">
                  <div class="icon">
                    <img src="../assets/images/home/videoIcon.png" alt srcset />375人已观看
                  </div>
                  <div
                    class="btn btn1"
                    @click="toHref"
                    :underline="false"
                    target="_blank"
                    href="http://unclesamedu.mikecrm.com/Nr18M07"
                  >观看回放</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <img src="/static/images/home/left.png" alt="" /> -->
          <!-- <img src="/static/images/home/right.png" alt="" /> -->
        </div>
        <div class="content content4" v-show="tabAct == 4">
          <div class="left">
            <img src="../../static/images/home/left.png" alt />
            <div
              class="icon icon1"
              @mouseenter="selfdomShowChange(1)"
              @mouseleave="selfdomShowChange(0)"
            ></div>
            <div
              class="icon icon2"
              @mouseenter="selfdomShowChange(2)"
              @mouseleave="selfdomShowChange(0)"
            ></div>
            <div
              class="icon icon3"
              @mouseenter="selfdomShowChange(3)"
              @mouseleave="selfdomShowChange(0)"
            ></div>
            <div class="text text1">
              <div
                class="key key1"
                @mouseenter="selfdomShowChange(1)"
                @mouseleave="selfdomShowChange(0)"
              >针对性强</div>
              <div class="val" v-show="selfdomShow == 1">
                根据学生实际出发
                <br />定制专属学习计划
              </div>
            </div>
            <div class="text text2">
              <div
                class="key key2"
                @mouseenter="selfdomShowChange(2)"
                @mouseleave="selfdomShowChange(0)"
              >时间灵活</div>
              <div class="val" v-show="selfdomShow == 2">
                依据学生时间
                <br />自由安排学习
              </div>
            </div>
            <div class="text text3">
              <div
                class="key key3"
                @mouseenter="selfdomShowChange(3)"
                @mouseleave="selfdomShowChange(0)"
              >融入感强</div>
              <div class="val" v-show="selfdomShow == 3">
                课上老师与学生时时互动
                <br />增加学生学习融入感
              </div>
            </div>
          </div>
          <div class="right">
            <el-col class="title">
              <div>服务流程</div>
            </el-col>
            <el-col class="item item1">
              <img src="../../static/images/home/flow1.png" alt />
              <div class="box">
                <div class="text">依据大数据系统科学，准确诊断学生知识点不足</div>
                <div class="wall"></div>
                <div class="card">AI智能测评，精准把脉</div>
              </div>
            </el-col>
            <el-col class="item item2">
              <img src="../../static/images/home/flow2.png" alt />
              <div class="box">
                <div class="card">制定个性化辅导方案</div>
                <div class="wall"></div>
                <div class="text">依据学生需求，靶向目标制定个性化辅导方案</div>
              </div>
            </el-col>
            <el-col class="item item3">
              <img src="../../static/images/home/flow3.png" alt />
              <div class="box">
                <div class="text">学科规划师依据学生实际情况为学生匹配最合适的老师</div>
                <div class="wall"></div>
                <div class="card">匹配适合学科老师</div>
              </div>
            </el-col>
            <el-col class="item item4">
              <img src="../../static/images/home/flow4.png" alt />
              <div class="box">
                <div class="card">一对一面对面授课</div>
                <div class="wall"></div>
                <div class="text">线上、线下面对面精准授课</div>
              </div>
            </el-col>
            <el-col class="item item5">
              <img src="../../static/images/home/flow5.png" alt />
              <div class="box">
                <div class="text">学管师时时跟进学习进度，反馈学习情况,使学习更高效</div>
                <div class="wall"></div>
                <div class="card">学管师专业服务</div>
              </div>
            </el-col>
            <el-col class="item item6">
              <img src="../../static/images/home/flow6.png" alt />
              <div class="box">
                <div class="text">阶段测评，检验学生学习效果使学生稳步提升</div>
                <div class="card">学习效果监测</div>
              </div>
            </el-col>
          </div>
        </div>
      </el-col>
      <el-col class="teacher">
        <div class="content">
          <div class="title">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="fir">规划专家</div>
            <div class="sec">旨为学生提供最成功的路径</div>
          </div>
          <div class="list">
             <div class="swiper-container swiper-container1">
                <div class="swiper-wrapper">
                      <div class="swiper-slide"   v-for="(item,index) in teacherList" :key="index">
                        <div class="item" v-for="(data,i) in item" :key='i'>
                          <div class="watermark">TEACHER</div>
                          <div class="hearderImg">
                            <img :src="data.img" alt @click="toHref" srcset/>
                          </div>
                          <div class="text">
                            <div class="wire"></div>
                            <div class="name">
                              {{data.name}}
                              <span>老师</span>
                            </div>
                            <div class="enName">{{data.enName}}</div>
                            <div class="details">{{data.details}}</div>
                          </div>
                        </div>
                      </div>
                </div>
                <div class="swiper-pagination pagination1"></div>
                <!-- <div class="swiper-button-prev prev"></div>
                <div class="swiper-button-next next"></div> -->
            </div> 
          </div>
        </div>
      </el-col>
      <el-col class="teacherBanner">
        <!-- <div class="content">
          <div class="title">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="fir">名师推荐</div>
            <div class="sec">旨为学生提供最优质的老师</div>
          </div>
          <div class="list">
            <div class="swiper-container swiper-container2 swiper">
              <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="boxImg">
                  <img src="../assets//images/home/t1.png" />
                  <div class="detail">
                    <div class="key">陈娴</div>
                    <div
                      class="val"
                    >全国优秀教师、中国数学奥林匹克高级教练员，多次荣获“科技员丁”、北京市优秀教师、北京市数学学科带头人等称号，在北大附中等学校任教多年，所带学生在国际国内数学竞赛中多次获奖。善于从本质出发启发学生，让学生自主产生学习兴趣，养成学习方法。</div>
                  </div>
                </div>
                  </div>
                  <div class="swiper-slide"><div class="boxImg">
                  <img src="../assets//images/home/t2.png" />
                  <div class="detail">
                    <div class="key">严智轩</div>
                    <div
                      class="val"
                    >毕业于学前教育专业，注重孩子的启发和引导，开朗热情，活泼爱笑，富有亲和力，轩轩老师的课堂上充满了激情与活力，也很细致耐心在抓住课堂重点的同时能为孩子们讲解清楚每一个细小的知识点，脾气温和亲和力强，能很好的掌控课堂节奏，使课堂氛围井然有序又不失活泼欢乐</div>
                  </div>
                </div></div>
                  <div class="swiper-slide">
                     <div class="boxImg">
                      <img src="../assets//images/home/t5.png" />
                      <div class="detail">
                        <div class="key">闫优</div>
                        <div class="val">
                          汉语言文学专业毕业；擅长阅读和写作,荣获19届“挑战杯”学术科技作品一等奖；丰富的教学经验，专业的授课能力,上课活泼不失严谨，幽默里有学问，
                          “静若处子，动若脱兔”，善于联系实际帮助学生身临其境地学会语文，学会思考；课堂把控能力强，带领学生于专注中掌握知识，于训练中提升素养
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="boxImg">
                      <img src="../assets//images/home/t4.png" />
                      <div class="detail">
                        <div class="key">夏婷</div>
                        <div class="val">
                          师范毕业，硕士学历，语文教学专业毕业，功底扎实，九年教学教研工作经验，开发过多种语文课程，擅长文学、阅读、写作课的教学
                          懂得孩子心理，善于鼓励孩子发挥孩子学习主动性；善于运用多媒体进行教学，打造“有趣、有效、有美感”的语文课
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="boxImg">
                      <img src="../assets//images/home/t3.png" />
                      <div class="detail">
                        <div class="key">王赟婷</div>
                        <div class="val">
                          毕业于师范院校，汉语言文学专业，六年教学工作经验，擅长阅读和写作课教学，善于鼓励孩子自己探索阅读和写作的奥秘
                          专注于小学语文课堂，用心创造属于孩子们的课堂
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
              <div class="swiper-pagination"></div>
            <div class="swiper-button-prev prev2">
              <img src="../assets//images/icon/left.png" width="100%" />
            </div>
            <div class="swiper-button-next next2">
              <img src="../assets//images/icon/right.png" width="100%" />
            </div>
          </div>
          </div>
        </div> -->
          <div class="content">
          <div class="title">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="fir">名师推荐</div>
            <div class="sec">旨为学生提供最优质的老师</div>
          </div>
          <div class="list">
            <swiper class="swiper" :options="swiperOption">
              <swiper-slide id="1">
                <div class="boxImg">
                  <img src="../assets//images/home/t1.png" />
                  <div class="detail">
                    <div class="key">陈娴</div>
                    <div
                      class="val"
                    >全国优秀教师、中国数学奥林匹克高级教练员，多次荣获“科技员丁”、北京市优秀教师、北京市数学学科带头人等称号，在北大附中等学校任教多年，所带学生在国际国内数学竞赛中多次获奖。善于从本质出发启发学生，让学生自主产生学习兴趣，养成学习方法。</div>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide id="2">
                <div class="boxImg">
                  <img src="../assets//images/home/t2.png" />
                  <div class="detail">
                    <div class="key">严智轩</div>
                    <div
                      class="val"
                    >毕业于学前教育专业，注重孩子的启发和引导，开朗热情，活泼爱笑，富有亲和力，轩轩老师的课堂上充满了激情与活力，也很细致耐心在抓住课堂重点的同时能为孩子们讲解清楚每一个细小的知识点，脾气温和亲和力强，能很好的掌控课堂节奏，使课堂氛围井然有序又不失活泼欢乐</div>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide id="3">
                <div class="boxImg">
                  <img src="../assets//images/home/t5.png" />
                  <div class="detail">
                    <div class="key">闫优</div>
                    <div class="val">
                      汉语言文学专业毕业；擅长阅读和写作,荣获19届“挑战杯”学术科技作品一等奖；丰富的教学经验，专业的授课能力,上课活泼不失严谨，幽默里有学问，
                      “静若处子，动若脱兔”，善于联系实际帮助学生身临其境地学会语文，学会思考；课堂把控能力强，带领学生于专注中掌握知识，于训练中提升素养
                    </div>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide id="4">
                <div class="boxImg">
                  <img src="../assets//images/home/t4.png" />
                  <div class="detail">
                    <div class="key">夏婷</div>
                    <div class="val">
                      师范毕业，硕士学历，语文教学专业毕业，功底扎实，九年教学教研工作经验，开发过多种语文课程，擅长文学、阅读、写作课的教学
                      懂得孩子心理，善于鼓励孩子发挥孩子学习主动性；善于运用多媒体进行教学，打造“有趣、有效、有美感”的语文课
                    </div>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide id="5">
                <div class="boxImg">
                  <img src="../assets//images/home/t3.png" />
                  <div class="detail">
                    <div class="key">王赟婷</div>
                    <div class="val">
                      毕业于师范院校，汉语言文学专业，六年教学工作经验，擅长阅读和写作课教学，善于鼓励孩子自己探索阅读和写作的奥秘
                      专注于小学语文课堂，用心创造属于孩子们的课堂
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
            <div class="swiper-button-prev prev2">
              <img src="../assets//images/icon/left.png" width="100%" />
            </div>
            <div class="swiper-button-next next2">
              <img src="../assets//images/icon/right.png" width="100%" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="campus">
        <div class="content">
          <div class="title">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="fir">校区展示</div>
            <div class="sec">专注小初高辅导20年</div>
          </div>
          <div class="img">
            <img src="../../static/images/home/list2.png" class="list1" alt srcset />
            <div>
              <img src="../../static/images/home/list3.png" class="list3" alt srcset />
              <img src="../../static/images/home/list4.png" class="list4" alt srcset />
              <br />
              <img src="../../static/images/home/list5.png" class="list5" alt srcset />
            </div>

            <img src="../../static/images/home/list6.png" class="list6" alt srcset />
          </div>
        </div>
      </el-col>
      <el-col class="map">
        <div class="content">
          <div class="title">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="fir">校区地址</div>
            <div class="sec">陪伴孩子终身学习</div>
          </div>
          <div class="map">
            <baidu-map
              :center="center"
              :zoom="zoom"
              style="height: 400px"
              @click="getClickInfo"
              :scroll-wheel-zoom="true"
            >
              <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label :content="mapContent" :offset="{ width: '-154', height: '30' }" />
              </bm-marker>
            </baidu-map>
          </div>
        </div>
      </el-col>
    </el-col>
    <FooterNav />
    <!-- <Sidebar /> -->
  </el-row>
</template>
<script src="../package/swiper-bundle.min.js"></script>
<script>
import Swiper from './../assets/js/swiper.js';
import Header from "@/components/header";
import FooterNav from "@/components/footernav";
import Banner from "@/components/banner";
// import Sidebar from "@/components/sidebar";
var mySwiper = '';
var mySwiper2 = '';
export default {
  // 页面名称
  name: "home",
  // 接受父组件传值
  props: {},
  // 定义模板
  components: {
    Header,
    FooterNav,
    Banner,
    // Sidebar
  },
  // Data数据
  data() {
    return {
      actNva: "HZ",
      infor: {
        url: "../../static/images/banner/banner1.png",
        height: "450px",
        type: 2,
        banner: []
      },
      // 选项卡
      tabAct: 1,
      value: [],
      options: [
        {
          value: "preschool",
          label: "学前",
          children: [
            {
              value: "23",
              label: "小班",
              children: [
                {
                  value: "111",
                  label: "素养"
                }
              ]
            },
            {
              value: "24",
              label: "中班",
              children: [
                {
                  value: "111",
                  label: "素养"
                }
              ]
            },
            {
              value: "25",
              label: "大班",
              children: [
                {
                  value: "111",
                  label: "素养"
                }
              ]
            },
            {
              value: "26",
              label: "幼小衔接",
              children: [
                {
                  value: "yizhi",
                  label: "素养"
                }
              ]
            }
          ]
        },
        {
          value: "primarySchool",
          label: "小学",
          children: [
            {
              value: "1",
              label: "一年级",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                }
              ]
            },
            {
              value: "2",
              label: "二年级",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                }
              ]
            },
            {
              value: "3",
              label: "三年级",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            },
            {
              value: "4",
              label: "四年级",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            },
            {
              value: "5",
              label: "五年级",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            },
            {
              value: "6",
              label: "六年级",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            }
          ]
        },
        {
          value: "juniorHighSchool",
          label: "初中",
          children: [
            {
              value: "7",
              label: "初一",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "110",
                  label: "信息学"
                }
              ]
            },
            {
              value: "8",
              label: "初二",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "104",
                  label: "物理"
                },
                {
                  value: "xiaolv",
                  label: "历史"
                },
                {
                  value: "109",
                  label: "政治"
                },
                {
                  value: "108",
                  label: "地理"
                },
                {
                  value: "110",
                  label: "信息学"
                }
              ]
            },
            {
              value: "9",
              label: "初三",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "104",
                  label: "物理"
                },
                {
                  value: "105",
                  label: "化学"
                },
                {
                  value: "106",
                  label: "生物"
                },
                {
                  value: "107",
                  label: "历史"
                },
                {
                  value: "109",
                  label: "政治"
                },
                {
                  value: "108",
                  label: "地理"
                },
                {
                  value: "110",
                  label: "信息学"
                }
              ]
            }
          ]
        },
        {
          value: "ziyuan",
          label: "高中",
          children: [
            {
              value: "11",
              label: " 高一",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "104",
                  label: "物理"
                },
                {
                  value: "105",
                  label: "化学"
                },
                {
                  value: "106",
                  label: "生物"
                },
                {
                  value: "107",
                  label: "历史"
                },
                {
                  value: "109",
                  label: "政治"
                },
                {
                  value: "108",
                  label: "地理"
                },
                {
                  value: "110",
                  label: "信息学"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            },
            {
              value: "14",
              label: "高二",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "104",
                  label: "物理"
                },
                {
                  value: "105",
                  label: "化学"
                },
                {
                  value: "106",
                  label: "生物"
                },
                {
                  value: "107",
                  label: "历史"
                },
                {
                  value: "109",
                  label: "政治"
                },
                {
                  value: "108",
                  label: "地理"
                },
                {
                  value: "110",
                  label: "信息学"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            },
            {
              value: "17",
              label: "高三",
              children: [
                {
                  value: "101",
                  label: "语文"
                },
                {
                  value: "102",
                  label: "数学"
                },
                {
                  value: "103",
                  label: "英语"
                },
                {
                  value: "104",
                  label: "物理"
                },
                {
                  value: "105",
                  label: "化学"
                },
                {
                  value: "106",
                  label: "生物"
                },
                {
                  value: "107",
                  label: "历史"
                },
                {
                  value: "109",
                  label: "政治"
                },
                {
                  value: "108",
                  label: "地理"
                },
                {
                  value: "112",
                  label: "政策解读"
                }
              ]
            }
          ]
        }
      ],
      grade: null,
      courseType: null,
      // courseList: [1, 2, 3, 4, 5, 6],
      courseList: [
        {
          teacherName: "刘老师",
          surplusQuota: "15",
          beginTime: "2020年12月05日",
          schoolOffArea: "黄庄校区",
          fee: "3980",
          href:
            "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_259.shtml"
        },
        {
          teacherName: "王老师",
          surplusQuota: "15",
          beginTime: "2021-7-10",
          schoolOffArea: "黄庄校区",
          fee: "3980"
        },
        {
          teacherName: "张老师",
          surplusQuota: "3",
          beginTime: "2021-1-27",
          schoolOffArea: "黄庄校区",
          fee: "3980"
        },
        {
          teacherName: "李老师",
          surplusQuota: "2",
          beginTime: "2021-6-8",
          schoolOffArea: "黄庄校区",
          fee: "3980"
        }
      ],
      tablist: [
        {
          title: "品牌悠久",
          enTitle: "BRAND",
          text: "20年办学经验，高品质教学质量"
        },
        {
          title: "师资强劲",
          enTitle: "TEACHERS",
          text: "顶级的师资团队，把握最新政策动态"
        },
        {
          title: "专业性高",
          enTitle: "SPECIALITY",
          text: "专精的规划内容，透析升学路径及方向"
        },
        {
          title: "科技辅助",
          enTitle: "TECHNOLOGY",
          text: "AI人工智能技术，为学生精准匹配师资"
        }
      ],
      tabImg: [
        require("../../static/images/home/tablist1.png"),
        require("../../static/images/home/tablist2.png"),
        require("../../static/images/home/tablist3.png"),
        require("../../static/images/home/tablist4.png")
      ],
      selfdomShow: 0,
      // 地图
      center: {
        lng: 116.312362,
        lat: 39.986951
      },
      zoom: 13,
      value: 3,

      // -------------------    使用黄庄校区来进行设置      ---------------------------
      // 每一个校区的数据
      // "HzCampus"    黄庄校区
      // "JinyuanCampus"    金源校区
      // "GongZhuFen"    公主坟校区
      // "ZgCampus"    中关村校区
      // "DzmCampus"    东直门校区
      // "SdCampus"    上地校区
      allSchool: {
        HZ: [
          {
            id: "001",
            img: require("../../public/images/hzCampus/hz1.png"),
            title: "人大附中早培特训",
            teacher: "闫老师",
            minge: "剩余15个名额",
            data: "2021年02月20日",
            area: "黄庄校区",
            price: "10000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_261.shtml",
            submit: "火热报名"
          },
          {
            id: "002",
            img: require("../../public/images/hzCampus/hz2.png"),
            title: "中考寒假托管集训班",
            teacher: "唐老师",
            minge: "剩余20个名额",
            data: "2021年02月05日",
            area: "黄庄校区",
            price: "16000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_239.shtml",
            submit: "火热报名"
          },
          {
            id: "003",
            img: require("../../public/images/hzCampus/hz3.png"),
            title: "剑桥KET证书特训班",
            teacher: "夏老师",
            minge: "剩余12个名额",
            data: "2021年04月03日",
            area: "黄庄校区",
            price: "10000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_269.shtml",
            submit: "火热报名"
          },
          {
            id: "004",
            img: require("../../public/images/hzCampus/hz4.png"),
            title: "20年PET常态1班",
            teacher: "范老师",
            minge: "剩余11个名额",
            data: "2020年12月05日",
            area: "黄庄校区",
            price: "26300元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_79.shtml",
            submit: "火热报名"
          }
        ],
        JY: [
          {
            id: "001",
            img: require("../../public/images/hzCampus/jy1.png"),
            title: "数学考前点睛班",
            teacher: "马老师",
            minge: "剩余30个名额",
            data: "2021年04月03日",
            area: "金源校区",
            price: "3000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_283.shtml",
            submit: "立即报名"
          },
          {
            id: "002",
            img: require("../../public/images/hzCampus/jy2.png"),
            title: "小升初备考班",
            teacher: "夏老师",
            minge: "剩余30个名额",
            data: "2021年06月19日",
            area: "金源校区",
            price: "24000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_279.shtml",
            submit: "火热报名"
          },
          {
            id: "003",
            img: require("../../public/images/hzCampus/jy3.png"),
            title: "小升初综合素质班",
            teacher: "夏老师",
            minge: "剩余30个名额",
            data: "2021年09月13日",
            area: "金源校区",
            price: "24000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_285.shtml",
            submit: "火热报名"
          },
          {
            id: "004",
            img: require("../../public/images/hzCampus/jy4.png"),
            title: "英语听说考",
            teacher: "杨老师",
            minge: "剩余15个名额",
            data: "2020年02月17日",
            area: "金源校区",
            price: "2700",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_249.shtml",
            submit: "火热报名"
          }
        ], //     金源校区
        GZF: [
          {
            id: "001",
            img: require("../../public/images/hzCampus/gzf1.png"),
            title: "幼升小常态备考班",
            teacher: "夏老师",
            minge: "剩余15个名额",
            data: "2021年01月30日",
            area: "公主坟校区",
            price: "8000元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_193.shtml",
            submit: "火热报名"
          },
          {
            id: "002",
            img: require("../../public/images/hzCampus/gzf2.png"),
            title: "小升初综素备考5期",
            teacher: "夏老师",
            minge: "剩余13个名额",
            data: "2020年12月13日",
            area: "公主坟校区",
            price: "11000元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_243.shtml",
            submit: "火热报名"
          },
          {
            id: "003",
            img: require("../../public/images/hzCampus/gzf3.png"),
            title: "小升初综素备考4期",
            teacher: "张老师",
            minge: "剩余10个名额",
            data: "2020年10月24日",
            area: "公主坟校区",
            price: "11000元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_239.shtml",
            submit: "立即抢报"
          },
          {
            id: "004",
            img: require("../../public/images/hzCampus/gzf2.png"),
            title: "小升初综素备考5期",
            teacher: "刘老师",
            minge: "剩余12个名额",
            data: "2020年12月13日",
            area: "公主坟校区",
            price: "11000元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_241.shtml",
            submit: "火热报名"
          }
        ], //    公主坟校区
        ZGC: [
          {
            id: "001",
            img: require("../../public/images/hzCampus/zgc1.png"),
            title: "八少八素名师常态备考班",
            teacher: "严老师",
            minge: "剩余20个名额",
            data: "2021年05月15日",
            area: "中关村校区",
            price: "37800元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_235.shtml",
            submit: "火热报名"
          },
          {
            id: "002",
            img: require("../../public/images/hzCampus/zgc2.png"),
            title: "KET冲刺线下课",
            teacher: "周老师",
            minge: "剩余12个名额",
            data: "2020年12月05日",
            area: "中关村校区",
            price: "9680元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_173.shtml",
            submit: "火热报名"
          },
          {
            id: "003",
            img: require("../../public/images/hzCampus/zgc3.png"),
            title: "KET冲刺线上课",
            teacher: "张老师",
            minge: "剩余12个名额",
            data: "2020年12月05日",
            area: "中关村校区",
            price: "9680元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_171.shtml",
            submit: "火热报名"
          },
          {
            id: "004",
            img: require("../../public/images/hzCampus/zgc4.png"),
            title: "PET常态1班",
            teacher: "李老师",
            minge: "剩余12个名额",
            data: "2020年12月05日",
            area: "中关村校区",
            price: "26300元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_169.shtml",
            submit: "火热报名"
          }
        ], //    中关村校区
        DZM: [
          {
            id: "001",
            img: require("../../public/images/hzCampus/dzm1.png"),
            title: "剑桥英语五级-FCE常态班（九班）",
            teacher: "唐老师",
            minge: "剩余30个名额",
            data: "2021年02月21日",
            area: "东直门校区",
            price: "30525元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_255.shtml",
            submit: "立即抢报"
          },
          {
            id: "002",
            img: require("../../public/images/hzCampus/dzm2.png"),
            title: "剑桥英语五级-KET常态班",
            teacher: "Jessie老师",
            minge: "剩余12个名额",
            data: "2021年01月31日",
            area: "东直门校区",
            price: "15300元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_175.shtml",
            submit: "立即抢报"
          },
          {
            id: "003",
            img: require("../../public/images/hzCampus/dzm3.png"),
            title: "剑桥英语五级-PET常态班",
            teacher: "马老师",
            minge: "剩余12个名额",
            data: "2020年12月27日",
            area: "东直门校区",
            price: "24300元",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_183.shtml",
            submit: "立即抢报"
          },
          {
            id: "004",
            img: require("../../public/images/hzCampus/dzm4.png"),
            title: "初二生物结课考试秋季班",
            teacher: "刘老师",
            minge: "剩余9个名额",
            data: "2020年11月21日",
            area: "东直门校区",
            price: "9200元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_123.shtml",
            submit: "立即报名"
          }
        ], //    东直门校区
        SD: [
          {
            id: "001",
            img: require("../../public/images/hzCampus/sd1.png"),
            title: "小升初民办校备考班",
            teacher: "夏老师",
            minge: "剩余25个名额",
            data: "2021年01月31日",
            area: "上地校区",
            price: "8880",
            href:
              "http://www.hqy2001.com/lecture/zhiboinfopage/courseinfo_zb_299.shtml",
            submit: "立即抢报"
          },
          {
            id: "002",
            img: require("../../public/images/hzCampus/sd2.png"),
            title: "初中语文综合素质",
            teacher: "韩老师",
            minge: "剩余6个名额",
            data: "2020年12月05日",
            area: "上地校区",
            price: "4400元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_259.shtml",
            submit: "立即抢报"
          },
          {
            id: "003",
            img: require("../../public/images/hzCampus/sd3.png"),
            title: "初中语文综合素质",
            teacher: "刘老师",
            minge: "剩余6个名额",
            data: "2020年12月05日",
            area: "上地校区",
            price: "6500元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_255.shtml",
            submit: "立即抢报"
          },
          {
            id: "004",
            img: require("../../public/images/hzCampus/sd4.png"),
            title: "初中数学综合素质",
            teacher: "张老师",
            minge: "剩余6个名额",
            data: "2020年12月05日",
            area: "上地校区",
            price: "6500元",
            href:
              "http://www.hqy2001.com/lecture/msinfopage/courseinfo_ms_253.shtml",
            submit: "立即报名"
          }
        ] //   上地校区
      },
      allteacher: {
        HZ: [
          {
            img: require("../../public/images/hzCampus/hzte2.png"),
            name: "晴雨",
            enName: "QING YU",
            details:
              "北京市小升初政策教育专家，小升初全能升学规划师，从事小升初研究长达10年，深谙小升初公办校、民办校招生各个环节奥秘，指导帮助众多学子成功进入早培、八少八素、十一学校、101中学、人分、师达、海外、建华、理分、人北联、人朝分等优质校！小升初家长心目中最重要的升学智多星！"
          },
          {
            img: require("../../public/images/hzCampus/hzte1.png"),
            name: "胡晓莉",
            enName: "HU XIAO LI",
            details:
              "胡老师专业且耐心，对海淀区乃至北京市小升初升学政策、入学途径等有深入的研究，为家长提供及时可靠的小升初政策规划与专业指导，会根据学生自身特点，为学生量身制定小升初升学规划，助力学生顺利升入理想目标校，深受家长、学生喜爱。"
          },
          {
            img: require("../../public/images/hzCampus/hzte3.png"),
            name: "魏云倩",
            enName: "WEI YUN QIAN",
            details:
              "北京市中考高考升学规划咨询师，熟悉北京中考、高考政策，从事中高考教育工作5年，大学生教育培训工作7年。对北京中高考教育培训工作深有研究。指导帮助众多中学生进入人大附中，北京四中，清华附中，十一学校等多所优质高中；深受家长和学生认可。"
          },
          {
            img: require("../../public/images/hzCampus/hzte4.png"),
            name: "王薇薇",
            enName: "WANG WEI WEI",
            details:
              "北京中考网咨询、规划师。熟悉北京地区中高考升学政策。从事中高考培训行业8年。指导过上万考生成功进入心仪高中、大学。 踏实沉稳，实事求是。具有服务精神，深受家长和同学一致好评。"
          },
          {
            img: require("../../public/images/hzCampus/hzte5.png"),
            name: "高林芳",
            enName: "GAO LIN FANG",
            details:
              "高老师是华清园八人教育升学规划咨询师，从事教育培训行业5年，对北京小升初政策有很深的研究，尤其是海淀区以及朝阳区，每年指导帮助近百名小升初家长进入人大附、八中、十一学校、师达、海外等理想的目标校，得到众多家长的认可。"
          },
          {
            img: require("../../public/images/hzCampus/hzte6.png"),
            name: "单秀丽",
            enName: "SHAN XIU LI",
            details:
              "华清园教育小升初咨询规划师，师范大学汉语言文学专业，主修教育学、心理学，掌握孩子各个阶段学习和心理特征。毕业后一直在北京从事小升初工作，认真、负责、专业、有爱心，能够结合孩子情况以及家长期望规划适合孩子的升学之路，经常获得家长的称赞！"
          },
        ],
        DZM: [
          {
            img: require("../../public/images/hzCampus/dzmta2.png"),
            name: "Lily",
            enName: "QI",
            details:
              "北京小升初网特约讲师，师范大学本科毕业，主修教育学、教育心理学，能站在家长的角度规划升学，从事升学研究多年，主讲升学政策千余场，对朝阳区，海淀区乃至北京市升学政策深有研究，已成功为数千位学生规划进入理想中学，得到家长的高度认可。"
          },
          {
            img: require("../../public/images/hzCampus/dzmta1.png"),
            name: "周",
            enName: "ZHOU",
            details:
              "一直用专业、周到服务着每位学生、家长，每年帮助众多小升初学生制定目标校，并顺利进入，帮助每一位同学走上光明的小升初升学之路，是周老师不变的心愿。"
          },
          {
            img: require("../../public/images/hzCampus/dzmta3.png"),
            name: "大梅",
            enName: "DA MEI",
            details:
              "从事小升初研究多年，结合朝阳海淀等各区小升初政策，根据孩子的成绩证书等，给孩子规划最优质的择校方向，为进入优质高中大学奠定良好的基础。"
          },
          {
            img: require("../../public/images/hzCampus/dzmta4.png"),
            name: "齐",
            enName: "QI",
            details:
              "华清园资深升学规划师，有着多年的教育行业从业经验，且对小升初政策、入学途径、学校招生方式等有较深研究，会根据学生自身特点，为学生量身制定小升初升学规划。帮助众多学员进入北京优质名校，包括大附中、十一学校、八中、人大附中朝阳学校、八十中学等。"
          },
          {
            img: require("../../public/images/hzCampus/dzmta5.png"),
            name: "张",
            enName: "ZHANG",
            details:
              "华清园资深升学规划老师，从事升学研究八年，对北京市各城区升学政策、入学途径、考试难度有深入的研究，总是从学生实际情况出发，有针对性的为学生制定升学和学习计划，帮助众多学员进入目标校，深受学生喜欢家长认可。"
          },
          {
            img: require("../../public/images/hzCampus/dzmta6.png"),
            name: "闫",
            enName: "YAN",
            details:
              "华清园教育升学规划师，从事教育培训行业八年，对北京小升初政策有很深的研究，尤其是朝阳区以及海淀区，深悉北京各区优质中学教学理念、中考成绩、招生途径、考试范围及难度。会根据学生自身特点，为学生量身制定小升初升学规划。每年帮助近百名小升初家长进入目标校。"
          },
          {
            img: require("../../public/images/hzCampus/dzmta7.png"),
            name: "李",
            enName: "LI",
            details:
              "华清园资深小初高规划专家，从事教育行业九年，毕业于211重点本科院校，九年教育行业升学规划从业经验，对北京小初高学科有深入研究，擅长为学生做心理疏导，学科详细分析，对升学数据有详尽的方案。"
          },
           {
            img: require("../../public/images/hzCampus/dzmta8.png"),
            name: "冯",
            enName: "FENG",
            details:
              "华清园冯老师一直致力于小升初和中高考的升学规划，对各个学校有深入研究，专业度高，多年经验，认真负责，已为上千名学生成功规划学校，始终坚信：适合的才是最重要的！"
          },
           {
            img: require("../../public/images/hzCampus/dzmta9.png"),
            name: "樊灵子",
            enName: "FAN",
            details:
              "从事小升初研究8年，对北京小升初入学政策有深入研究，历年来致身于服务家长和学员，为家长提供可靠稳妥的小升初入学途径，倍受家长好评，大姐姐一般的温婉，对学生关爱亲切，善于与学生沟通，与学生亦师亦友"
          },
        ], //    东直门校区
        SD: [
          {
            img: require("../../public/images/hzCampus/tsd2.png"),
            name: "阿斗",
            enName: "A DOU",
            details:
              "北京小升初网特约讲师，北京小升初网线下主讲升学讲座10年，千余场。华清园教育上地校区校长；从事教育培训行业十余年，对海淀、北京市升学政策深有研究。升学规划清晰明确，贴合实际，每年帮助数以百计学生顺利升入理想目标校，深受家长、学生喜爱。"
          },
          {
            img: require("../../public/images/hzCampus/tsd1.png"),
            name: "郝璐月",
            enName: "HAO LV YUE",
            details:
              "从事教育培训行业十余年，各大知名机构资深升学顾问，咨询主管。北京幼升小、小升初政策专家，北京幼升小网、北京小升初网线下讲师。"
          },
          {
            img: require("../../public/images/hzCampus/tsd3.png"),
            name: "张晓风",
            enName: "ZHANG XIAO FENG",
            details:
              "华清园教育首席升学规划师，对北京小升初、中考政策深有研究。咨询专业且贴心暖心，善于站在家长角度出发思考问题，制定规划"
          },
          {
            img: require("../../public/images/hzCampus/tsd4.png"),
            name: "李荣荣",
            enName: "LI RONG RONG",
            details:
              "华清园教育首席升学规划师，对北京小升初、中考政策深有研究。5年教学经验，7年咨询经验，从学生及家长双重角度解决痛点问题，成功案例成百上千。"
          },
          {
            img: require("../../public/images/hzCampus/tsd5.png"),
            name: "吕赵杨",
            enName: "LV ZHAO YANG",
            details:
              "一直用专业、周到服务着每位学生、家长，每年帮助众多学生制定目标校，并顺利进入，帮助每一位同学走上光明的升学之路，踏实沉稳，实事求是。具有服务精神，深受家长和同学一致好评。"
          }
        ],
        JY: [
            {
            img: require("../../public/images/hzCampus/tjy2.png"),
            name: "丛文",
            enName: "CONG WEN",
            details: "知名升学考试指导专家，北京小升初网特约讲师。从事教育行业10余年，成功举办个人小升初升学讲座百余场，数万学生受益。成功规划多名学生进入人大附中、十一学校、八中、首师附中、101中学、北大附中等公办校，师达、北达资源等民办校更是数不胜数。被家长称为“升学智囊”"
          },
          {
            img: require("../../public/images/hzCampus/tjy1.png"),
            name: "成尧",
            enName: "CHENG YAO",
            details: "成老师从事教育培训行业十余年，对北京市尤其东西海朝等城区升学政策深有研究，在小升初升学规划、中高考升学方面经验丰富。升学规划清晰明确，贴合实际，每年帮助数以百计的莘莘学子顺利升入理想学校，多年来已帮助数千学子梦想成真，深受家长、学生喜爱。"
          },
          {
            img: require("../../public/images/hzCampus/tjy3.png"),
            name: "宋珊珊",
            enName: "SONG SHAN SHAN",
            details: "华清园教育升学规划专家老师，985大学毕业，从事教育培训行业十余年，深入研究各阶段学生的升学诉求，深悉北京市海淀区，朝阳区等重点学校升学政策及招生途径，帮助数千名学生规划进入理想学校，深受家长们好评。"
          },
          {
            img: require("../../public/images/hzCampus/tjy4.png"),
            name: "王巧灵",
            enName: "WANG QIAO LING",
            details: "华清园资深规划师。有多年的教育行业从业经验，对小升初升学政策、入学途径、学校招生方式等有较深研究，一直用专业、周到服务着每位学生和家长，帮助众多小升初学生制定目标，并顺利进入理想学校。"
          },
          {
            img: require("../../public/images/hzCampus/tjy5.png"),
            name: "尹秀旭",
            enName: "YIN XIU XU",
            details: "六年小升初、中高考规划指导经验，七年竞赛指导经验，指导近千人进入名校，用最专业的知识帮助学生最快取得学业的进步以及升学目标！多年来凭借成功的实践、及认真负责的服务态度，已经成为众多学生及家长的良师益友。"
          },
          {
            img: require("../../public/images/hzCampus/tjy6.png"),
            name: "臧毫",
            enName: "ZANG HAO",
            details: "五年小升初实践经验、专业的服务，严谨的态度，形成了良好的口碑。尤其擅长对海淀小升初、跨区择校、有深入实践、广泛研究。能够结合实际情况给学生及家长全线规划，帮助众多的学生进入优质的学校。"
          },
          {
            img: require("../../public/images/hzCampus/tjy7.png"),
            name: "张淼",
            enName: "ZHANG MIAO",
            details: "八年教育行业从业经验、超千人K12规划、教育经验、曾任剑桥—高教外语考试中心、剑桥英语事业部 咨询师、曾任北京外语广播 某栏目编辑。对涉及小学、初中、高中各阶段能力提升、学业规划、择校有资深教育实践经验、对有关小升初重点趋势有良好的预判和经验积累，擅长一对一精准规划，服务学生全方位咨询。"
          }
        ],
        ZGC: [
          {
            img: require("../../public/images/hzCampus/zgcta2.png"),
            name: "观澜",
            enName: "GUAN LAN",
            details:
              "观澜老师：资深知名小升初规划指导专家，北京小升初网、幼升小网首席特约讲师。数篇20万加的升学文章，从事教育行业10多年，深谙各区、校招生要求及方式，对八中、人大附中、十一学校、首师附中、101中学、北大附中、师达、北大附实验等学校及剑桥考级、奥数杯赛等考试非常熟悉，举办个人大中型讲座千余场，帮助数万学子成功规划进入优质学校！"
          },
          {
            img: require("../../public/images/hzCampus/zgcta1.png"),
            name: "宫蕾",
            enName: "GONG LEI",
            details:
              "宫老师有着多年的教育行业从业经验，是众多北京小升初家长、学员眼中的升学良师，帮助众多学生顺利上岸。"
          },
          {
            img: require("../../public/images/hzCampus/zgcta3.png"),
            name: "王瑞杰",
            enName: "WANG RUI JIE",
            details:
              "王老师华清园小升初资深升学规划师，根据学生实际情况，为家长提供及时可靠的小升初政策指导，规划适合孩子的升学出路。是学生、家长升学路上的良师益友"
          },
          {
            img: require("../../public/images/hzCampus/zgcta4.png"),
            name: "李娟",
            enName: "LI JUAN",
            details:
              "李老师作为华清园中关村校区金牌咨询师，备受北京小升初家长欢迎，曾帮助成百上千教育弱区学员以及非京籍学员升入理想学校。"
          },
          {
            img: require("../../public/images/hzCampus/zgcta5.png"),
            name: "高江川",
            enName: "GAO JIANG CHUAN",
            details:
              "高老师作为华清园中关村校区金牌咨询师，从事教育行业5年之久，主做小升初规划，尤其对于三～六年级的学生规划相当擅长，备受小升初家长欢迎。"
          },
          {
            img: require("../../public/images/hzCampus/zgcta6.png"),
            name: "郑小清",
            enName: "ZHENG XIAO QING",
            details:
              "郑老师有着多年的教育行业从业经验，为小升初家长、中高考学生提供了专业的规划和指导，帮助众多学生进入理想的学府。"
          },
          {
            img: require("../../public/images/hzCampus/zgcta7.png"),
            name: "邓占云",
            enName: "DENG ZHAN YUN",
            details:
              "邓老师有着多年的教育行业咨询和培训经验，擅长小升初的升学规划和辅导，受到大量家长欢迎，帮助众多小学生考入理想初中。"
          }
        ],
        GZF: [
           {
            img: require("../../public/images/hzCampus/gzft2.png"),
            name: "李泽相",
            enName: "LI ZE XIANG",
            details:
              "幼升小首席升学规划师，从事幼升小研究多年，曾主讲上百场中大型幼升小升学指导讲座，思路清晰、语言诙谐，精彩纷呈；对海淀区乃至北京市幼升小升学政策，入学途径，重点校择校方式有很深的研究。"
          },
          {
            img: require("../../public/images/hzCampus/gzft1.png"),
            name: "张敏",
            enName: "ZHANG MIN",
            details:
              "华清园小升初资深升学规划师，对北京市升学政策非常了解，深悉北京部分优质中学教学理念、中考成绩、招生途径、考试范围及难度。会根据学生自身特点，为学生量身制定小升初升学规划。指导并帮助众多学生升入理想学校，其中六小强及跨区择校成功案例众多，深受家长信赖。"
          },
          {
            img: require("../../public/images/hzCampus/gzft3.png"),
            name: "赵亚静",
            enName: "ZHAO YA JING",
            details:
              "多年教育行业从业经验，研究数字心理学多年，会根据学生自身特点，为学生量身制定小升初升学规划。对各区小升初政策、入学途径、学校招生方式、简历要求等有较深研究。用专业、周到服务着每位学生、家长，每年帮助众多小升初学生制定目标校，并顺利进入。"
          },
          {
            img: require("../../public/images/hzCampus/gzft4.png"),
            name: "贾真丽",
            enName: "JIA ZHEN LI",
            details:
              "从事K12领域多年，资深升学专家，擅长解读小升初政策信息及入学途径等，帮助各位家长扫清小升初困惑，科学引导备考小升初。"
          },
          {
            img: require("../../public/images/hzCampus/gzft5.png"),
            name: "李骏",
            enName: "LI JUN",
            details:
              "华清园资深规划师。有着多年的教育行业从业经验，且对升学政策、入学途径、学校招生方式等有较深研究，会根据学生自身特点，为学生量身制定升学规划。每年帮助众多小升初学生进入目标校"
          },
          {
            img: require("../../public/images/hzCampus/gzft6.png"),
            name: "李秀梅",
            enName: "LI XIU MEI",
            details:
              "多年从事升学以及学习管理教育工作，积累了丰富的工作经验，熟知各项升学政策以及各所备考学校情况，为数百名学员提供升学指导以及学习规划，深入研究孩子们的学习管理以及学习过程中的心理变化。"
          },
          {
            img: require("../../public/images/hzCampus/gzft7.png"),
            name: "刘晶莹",
            enName: "LIU JIN YING",
            details:
              "从事多年教育行业，熟悉北京幼升小 小升初 中高考升学政策，经验丰富。能从家长和孩子的角度规划升学路线，历年所带学生均升入北京重点学校。深受家长和学生的认可。"
          },
          {
            img: require("../../public/images/hzCampus/gzft8.png"),
            name: "高梓馨",
            enName: "GAO ZI XIN",
            details:
              " 从事升学教育行业近十年。多年来担任资深升学规划师帮助小升初学生择校成功，提前“上岸”。对政策了解清晰，根据学生情况个性化规划升学路线，可实操性强，深得家长学生认可。"
          },
          {
            img: require("../../public/images/hzCampus/gzft9.png"),
            name: "史玮",
            enName: "SHI WEI",
            details:
              "从事升学教育行业多年，指导成功升学的学生数以百计。深谙升学途径与择校标准。政策解读准确，学校信息掌握全面，升学规划指导详细，教育现状了解深刻。指导跨区择校成功案例众多，规划学习方向以及内容详细，深得众多学生与家长的肯定。"
          },
          {
            img: require("../../public/images/hzCampus/gzft10.png"),
            name: "魏春玲",
            enName: "WEI CHUN LING",
            details:
              " 从事教育行业多年，积累了丰富的从业经验，熟知升学政策，为近百名家长提供过升学指导，工作认真勤勉，积极主动，了解学生特点和心理，深受家长和学员的认可。"
          },
          {
            img: require("../../public/images/hzCampus/gzft11.png"),
            name: "霍彩虹",
            enName: "HUO CAI HONG",
            details:
              "从事教育行业多年，带班经验丰富，了解学生特点和心理，是学生的好老师同事也是他们的好朋友，深受家长和同学的喜爱和认可，同时熟知小升初及幼升小升学政策、学校情况，已成功帮助数以百计学员择校成功，进入理想学校"
          }
        ]
      },
      allsite: {
        HZ: {
          campus: "黄庄校区",
          phone: "010-05623 9682",
          site: "校区地址：北京市海淀区知春路118号知春大厦15层"
        },
        DZM: {
          campus: "东直门校区",
          phone: "010-5724 1971",
          site: "校区地址：北京市东直门东方银座C座7层"
        },
        JY: {
          campus: "金源校区",
          phone: "010-8886 5401",
          site: "校区地址：海淀区蓝靛厂路25号汇博大厦A座二层（华清园教育）"
        },
        GZF: {
          campus: "公主坟校区",
          phone: "010-5365 9689",
          site: "校区地址：北京市海淀区复兴路47号天行健大厦5层511室"
        },
        SD: {
          campus: "上地校区",
          phone: "010-6296 9885",
          site: "北京市海淀区上地西路41号院宏达商务中心C座2层 C002"
        },
        ZGC: {
          campus: "中关村校区（原西直门校区）",
          phone: "010-5334 8242",
          site: "校区地址：海淀区海淀南路34号艾瑟顿商业广场310"
        }
      },
      /* 老师 */
      teacherList:[],
      /* 地方 */
      plateList:[],
      /* 地图 */
      mapContent:"",
      swiperOption: {
        slidesPerView: 5,
        spaceBetween: 10,
        centeredSlides: true,
        slideToClickedSlide: true,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next.next2",
          prevEl: ".swiper-button-prev.prev2"
        },
        on:{
        }
      },
    };
    
  },
  // 侦听器
  watch: {
    $route: function(newVal, oldVal) {
      this.actNva = newVal.name;
      this.tabAct = 1;
      console.log(this.tabAct);
      this.teacherchange();/* 老师变换 */
      this.plateListchange();/* 学区变换 */ 
      this.mapContentchange();/* 地图变换 */
      window.location.reload();
    }
  },
  created(){
    this.teacherchange()
    this.plateListchange()
    this.mapContentchange()
  },
  computed: {
    cnt() {
      if (this.surplusQuota < 3) {
        return "哈哈哈哈哈哈哈哈";
      }
    },
    cnt2() {
      if (this.surplusQuota15) {
        return "rrrrll";
      }
    },
    // 根据路由获取不同学校的课程数据
    classData() {
      return this.allSchool[this.$route.name];
    },
    // teacherchange() {
    //   return this.allteacher[this.$route.name];
    // },
    // teacherList() {
    //     // 
    //   return this.allteacher[this.$route.name];
    // },
    plateList() {
      return this.allsite[this.$route.name];
    },
    // 获取地图上的提示信息
    // mapContentchange() {
    //   this.mapContent = 
    //     "<p style='fontSize: 14px;border-color： #ccc; padding:24px;'><span style='color: #7F2189FF;'>华清园教育（" +
    //     this.plateList.campus +
    //     " )</span><br />报名电话：" +
    //     this.plateList.phone +
    //     "<br />校区地址：" +
    //     this.plateList.site +
    //     "</p>"
    // }
  },
  // 钩子函数
  mounted() {
    this.actNva = this.$route.name;
    console.log(this.actNva);
    mySwiper = new Swiper ('.swiper-container1', {
      loop: true, // 循环模式选项
      autoplay:true,
      pagination: {
        clickable:true,
        el: '.pagination1',
      }
      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next.next',
      //   prevEl: '.swiper-button-prev.prev',
      // }
    })  
  },
  // 方法
  methods: {
    teacherchange(){
      var datas = this.allteacher[this.$route.name];
      //console.log(datas);
      var pro = [];
      /* 每2个为一组 */
      for(var i=0;i<datas.length;i+=2){
        pro.push(datas.slice(i,i+2));
      }
      this.teacherList = [...pro];
      //console.log(JSON.parse(JSON.stringify(this.teacherList)));
      if(mySwiper!=''){
        /* 重置轮播 */
        mySwiper.init();
      }
      
    },
    plateListchange(){
      this.plateList = this.allsite[this.$route.name]
      if(mySwiper2!=''){
        /* 重置轮播 */
        mySwiper2.init();
      }
    },
    /* 地图变换 */
    mapContentchange() {
      this.mapContent = 
      "<p style='fontSize: 14px;border-color： #ccc; padding:24px;'><span style='color: #7F2189FF;'>华清园教育（" +
        this.plateList.campus +
        " )</span><br />报名电话：" +
        this.plateList.phone +
        "<br />" +
        this.plateList.site +
        "</p>"
    },
    handleChange(value) {
      console.log(value);
    },

    classifyActChange(e) {
      this.classifyAct = e;
    },

    // 选项卡切换
    changeTab(e) {
      this.tabAct = e;
    },
    // 地图
    handler({ BMap, map }) {
      var point = new BMap.Point(116.312362, 39.986951);
      map.centerAndZoom(point, 13);
      var marker = new BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: "Red",
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: "Red",
        fillColor: "#f03"
      });
      map.addOverlay(circle);
    },
    getClickInfo(e) {
      console.log(e.point.lng);
      console.log(e.point.lat);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    // 跳转外链
    toHref() {
      window.open("http://unclesamedu.mikecrm.com/Nr18M07", "_blank");
    },
    selfdomShowChange(e) {
      this.selfdomShow = e;
      console.log(e);
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./../assets/css/swiper.min.css');
#home {
  // height: 100vh;
  min-width: 1200px;
  // background: #f5f6fa;
  $textColor: #8d3996;
  $textColor1: #8b8b8b;
  $bgColor: #7f2189;

  .center {
    // height: calc(100% - 272px);
    // padding-top: 64px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-around;

    .tab {
      width: 1200px;
      margin: -53px auto 0;
      position: relative;
      z-index: 1;

      .tabBtn {
        width: 832px;
        height: 86px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;

        // &:hover {
        //   .act {
        //     height: 86px !important;
        //     line-height: 78px !important;
        //   }
        // }
        .item {
          width: 208px;
          height: 86px;
          line-height: 78px;
          text-align: center;
          box-sizing: border-box;
          border-top: 18px solid;
          color: $textColor;
          background: #f8f8f8;
          font-size: 18px;
          font-weight: bold;
          box-shadow: -2px -2px 8px 0px rgba(73, 32, 177, 0.25);
          cursor: pointer;

          &:nth-of-type(1) {
            border-color: #f88dd4;
          }

          &:nth-of-type(2) {
            border-color: #fc8643;
          }

          &:nth-of-type(3) {
            border-color: #8bdff9;
          }

          &:nth-of-type(4) {
            border-color: #531193;
          }

          // &:hover {
          //   height: 104px !important;
          //   line-height: 86px !important;
          // }
          &.act {
            height: 104px;
            line-height: 86px;
          }
        }
      }

      .content {
        margin: 73px 0 73px;
      }

      .content1 {
        .el-scrollbar {
          margin-top: 49px;

          & >>> .el-scrollbar__wrap {
            overflow-x: auto;
            margin-right: 17px;
          }
        }

        .filtrate {
          .el-select {
            margin-right: 29px;
            margin-bottom: 14px;
            margin-top: 50px;
          }

          .el-button {
            width: 81px;
            color: #fcea8f;
            background-image: linear-gradient(#c474d4, #772e8b);
            border: 0;
          }
        }

        .list {
          padding-bottom: 36px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;

          .item {
            width: 49%;
            // width: 100%;
            margin-bottom: 45px;
            display: flex;
            margin-right: 12px;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;

            .left {
              width: 255px;
              height: 174px;
              position: relative;

              img {
                width: 255px;
                height: 174px;
                object-fit: cover;
              }

              .text {
                width: 55%;
                height: 108px;
                line-height: 108px;
                text-align: center;
                font-size: 30px;
                font-family: hzgb;
                font-weight: 500;
                color: #ffffffff;
                position: absolute;
                top: 0;
                left: 0;
              }

              .entext {
                font-size: 30px;
                color: #ffffffff;
                position: absolute;
                top: 0;
                left: 6;
              }
            }

            .right {
              width: calc(100% - 259px);
              height: 141px;
              color: $textColor1;
              border: 1px solid $bgColor;
              font-size: 14px;
              box-sizing: border-box;
              padding: 16px 6px;
              padding-right: 30px;
              display: flex;
              flex-wrap: wrap;
              align-items: flex-end;
              align-content: space-between;
              justify-content: space-between;
              position: relative;

              div {
                margin-bottom: 8px;
              }

              & > div {
                width: 100%;
              }

              .places {
                // #FDE8FF
                position: absolute;
                top: 14px;
                right: 3px;
                width: 86px;
                text-align: center;
                background-color: #fde8ff;
                border-color: #fde8ff;
                color: #7f2189;
              }

              .statusBox {
                position: absolute;
                bottom: 2px;
                right: 12px;
                text-align: right;

                .status {
                  background: linear-gradient(0deg, #6b1680, #7f2189, #db69e7);
                  border: none;
                  color: #ffffff;
                  cursor: pointer;
                  padding: 2px 8px;
                  border-radius: 4px;
                  // &.status0 {
                  //   color: $bgColor;
                  //   background: linear-gradient(0deg, #9e9e9e, #f1f1f1);
                  // }
                }
              }
            }
          }
        }
      }

      .content2 {
        margin-top: 90px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .list {
          width: 260px;
          height: 280px;
          position: relative;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          align-content: space-between;
          margin-bottom: 93px;

          .title {
            position: relative;
            z-index: 1;

            .fir {
              font-size: 18px;
              font-weight: 400;
              color: #8d3996;
              opacity: 0.4;
            }

            .sec {
              margin-left: 28px;
              font-size: 18px;
              font-weight: bold;
              color: #8d3996;
            }
          }

          .img {
            width: 197px;
            height: 219px;
            position: absolute;
            top: calc(50% - 100px);
            right: 0;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .text {
            position: relative;
            z-index: 1;
            width: 184px;
            height: 70px;
            line-height: 26px;
            box-sizing: border-box;
            padding: 9px 13px;
            font-size: 14px;
            font-weight: 400;
            color: $textColor1;
            background: #f8f8f8;
          }
        }
      }

      .content3 {
        height: 600px;
        margin-top: 49px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .box {
          width: 100%;

          .title {
            width: 110px;
            height: 40px;
            line-height: 40px;
            background: $bgColor;
            text-align: center;
            font-size: 16px;
            font-weight: 400;
            color: #ffffff;
            margin-bottom: 37px;
          }

          .list {
            box-sizing: border-box;
            padding: 0 39px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;

            .items {
              width: 346px;
              height: 181px;
              border: 1px solid #85258e;
              box-sizing: border-box;
              padding: 32px 24px;
              margin-bottom: 44px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between;

              .left {
                width: 190px;
                height: 90px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                align-content: space-between;

                div {
                  &:nth-of-type(1) {
                    font-size: 16px;
                    color: #252525;
                  }

                  &:nth-of-type(2),
                  &:nth-of-type(3) {
                    font-size: 13px;
                    color: $textColor1;
                  }
                }

                .el-rate {
                  display: inline-block;
                }
              }

              .right {
                width: 54px;
                height: 90px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                align-content: space-between;

                .name {
                  text-align: center;
                  font-size: 12px;
                  color: $textColor1;
                  // line-height: 30px;
                }
              }

              .bottom {
                width: 100%;
                height: 49px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-end;

                .btn {
                  width: 75px;
                  height: 25px;
                  line-height: 25px;
                  font-size: 14px;
                  text-align: center;

                  &.btn1 {
                    background: $bgColor;
                    color: white;
                  }

                  &.btn2 {
                    background: #f5e708;
                    color: $bgColor;
                    margin-left: 18px;
                  }
                }

                .icon {
                  font-size: 12px;
                  font-weight: 400;
                  color: $textColor1;
                  display: flex;
                  flex-wrap: wrap;
                  align-items: center;
                }
              }
            }
          }

          &:nth-of-type(2) {
            .bottom {
              justify-content: space-between !important;
            }
          }
        }
      }

      .content4 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: space-between;
        margin-bottom: 76px;

        & > div {
          width: 50%;
        }

        .left {
          position: relative;

          & > img {
            box-shadow: 12px 0 22px -14px #dbdbdb;
          }

          & > div {
            position: absolute;
          }

          .icon {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            // background: black;
            top: 0;
            left: 0;

            &.icon1 {
              top: 49px;
              left: 61px;
            }

            &.icon2 {
              top: 216px;
              left: 216px;
            }

            &.icon3 {
              top: 382px;
              left: 61px;
            }
          }

          .text {
            top: 0;
            left: 0;

            &.text1 {
              top: 55px;
              left: 200px;
            }

            &.text2 {
              top: 225px;
              left: 357px;
            }

            &.text3 {
              top: 394px;
              left: 204px;
            }

            .key {
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 3px;

              &.key1 {
                color: #e5461d;
              }

              &.key2 {
                color: #16949f;
              }

              &.key3 {
                color: #69a013;
              }
            }

            .val {
              font-size: 14px;
              color: $textColor1;
            }
          }
        }

        .right {
          .el-col {
            width: auto;
            position: relative;

            img {
              display: block;
            }

            .box {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding-top: 39px;
              position: absolute;
              left: 0;
              top: 0;
              font-size: 14px;

              .text {
                width: 124px;
                margin: 0 auto;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
              }

              .wall {
                width: 100%;
                height: 24px;
              }

              .card {
                width: 150px;
                height: 24px;
                line-height: 24px;
                margin: 0 auto;
                text-align: center;
                background: #ffffff;
                border-radius: 10px;
                font-weight: 400;
                color: #274eab;
              }
            }
          }

          .item2 {
            .box {
              .card {
                color: #ebbf0a;
              }

              .text {
                color: $textColor1;
              }
            }
          }

          .item3 {
            .box {
              .card {
                color: #963fa8;
              }
            }
          }

          .item4 {
            .box {
              .card {
                color: #f57b7b;
              }
            }
          }

          .item5 {
            .box {
              .card {
                color: #e6a83f;
              }
            }
          }

          .item6 {
            // align-content: space-between;
            .box {
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              justify-content: space-around;
              align-items: flex-start;
              padding: 9px 24px;

              .card {
                color: #ffffff;
                background: #d27bd9;
                margin: 0;
              }

              .text {
                width: 180px;
                color: #963fa8;
                margin: 0;
              }
            }
          }

          .title {
            width: 100%;

            div {
              width: 95px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              background: #fcd2ff;
              font-size: 16px;
              font-weight: bold;
              color: #8d3996;
              margin-bottom: 9px;
            }
          }
        }
      }
    }

    .teacher {
      padding: 64px;
      background: url("/static/images/hzCampus/te8g.png") center center
        no-repeat;

      .content {
        width: 1200px;
        height:750px;
        margin: 0 auto;
        background: white;
        box-sizing: border-box;
        padding: 40px;

        .title {
          color: $textColor;
          position: relative;
          margin-left: 54px;
          margin-bottom: 36px;

          .dot {
            width: 9px;
            height: 9px;
            position: absolute;
            left: -13px;
            bottom: 0;

            &:nth-of-type(1) {
              background: $textColor;
              bottom: 27px;
            }

            &:nth-of-type(2) {
              background: #b86dda;
              bottom: 15px;
            }

            &:nth-of-type(3) {
              background: #fff338;
              bottom: 3px;
            }
          }

          .fir {
            font-size: 26px;
            font-weight: bold;
            color: $textColor;
          }

          .sec {
            font-size: 14px;
            font-weight: 400;
            color: $textColor1;
          }
        }

        .list {
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          align-items: center;
          align-content: space-between;
          justify-content: space-between;
         
          .swiper-container{
              padding-bottom: 105px;
          }
          .item {
            // width: 560px;
            width: 100%;
            position: relative;
            margin-bottom: 45px;

            .watermark {
              font-size: 72px;
              font-weight: bold;
              color: $textColor;
              line-height: 74px;
              opacity: 0.11;
            }

            .hearderImg {
              width: 214px;
              height: 187px;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                cursor: pointer;
                transition: all 0.3s ease-out;

                // &:hover {
                //   transform: scale(1.1);
                //   box-shadow: 9px 9px 24px -9px black;
                // }
              }
            }

            .text {
              transition: all 0.3s ease-out;

              // &:hover {
              //   transform: scale(1.05);
              // }

              .wire {
                width: 171px;
                height: 3px;
                background: $textColor1;
              }

              .name {
                font-size: 20px;
                font-weight: bold;
                color: $textColor;
                line-height: 35px;

                span {
                  font-size: 16px;
                  font-weight: 100;
                  margin-left: 3px;
                }
              }

              .enName {
                font-size: 16px;
                color: $textColor1;
              }

              .details {
                // width: 324px;
                // height: 119px;
                font-size: 14px;
                // font-family: Microsoft YaHei;
                font-weight: 400;
                color: $textColor1;
                line-height: 26px;
              }
            }
            /* 样式第一个 */
            & {
              padding: 38px 60px;
              height: 240px;
              // padding-top: 36px;
              display: flex;
              flex-wrap: wrap;
              align-items: flex-end;
              justify-content: space-between;
              width: 100%;
              box-sizing: border-box;
              .watermark {
                position: absolute;
                top: 0;
                left: 122px;
              }

              .text {
                width: calc(100% - 230px);
                // margin-bottom: -24px;
                margin-bottom: 14px;

                .enName {
                  margin-bottom: 9px;
                }
              }
            }

            // &:nth-of-type(2) {
            //   width: 100%;
            //   // top: -81px;
            //   // padding-top: 36px;
            //   display: flex;
            //   flex-wrap: wrap;
            //   align-items: flex-end;
            //   justify-content: space-between;

            //   .watermark {
            //     position: absolute;
            //     top: 0;
            //     left: 122px;
            //   }

            //   .text {
            //     width: calc(100% - 230px);
            //     // margin-bottom: -24px;
            //     display: flex;
            //     flex-wrap: wrap;
            //     align-items: center;
            //     justify-content: space-between;

            //     .wire {
            //       width: 154px;
            //       height: 3px;
            //       background: $textColor1;
            //     }

            //     .details {
            //       width: 100%;
            //     }
            //   }
            // }

            // &:nth-of-type(3) {
            //   width: 100%;
            //   // width: 320px;
            //   // padding-top: 36px;
            //   // margin-top: 91px;
            //   display: flex;
            //   flex-wrap: wrap;
            //   align-items: flex-end;
            //   justify-content: flex-end;

            //   .watermark {
            //     position: absolute;
            //     top: 0;
            //     left: 0;
            //   }

            //   .text {
            //     width: 100%;
            //     margin-bottom: -24px;
            //     position: relative;
            //     top: -36px;

            //     .enName {
            //       margin-bottom: 9px;
            //     }
            //   }
            // }

            // &:nth-of-type(4) {
            //   // width: 600px;
            //   width: 100%;
            //   // top: -108px;
            //   // left: -25px;
            //   padding-top: 36px;
            //   display: flex;
            //   flex-wrap: wrap;
            //   align-items: flex-end;
            //   justify-content: space-between;

            //   .watermark {
            //     position: absolute;
            //     top: 0;
            //     left: 122px;
            //   }

            //   .text {
            //     width: calc(100% - 230px);
            //     margin-bottom: -24px;

            //     .enName {
            //       margin-bottom: 9px;
            //     }
            //   }
            // }

            // &:nth-of-type(5) {
            //   // width: 660px;
            //   // padding-top: 0px;
            //   // left: 400px;
            //   // top: -166px;
            //   width: 100%;
            //   display: flex;
            //   flex-wrap: wrap;
            //   align-items: flex-end;
            //   justify-content: space-between;

            //   .watermark {
            //     position: absolute;
            //     top: -43px;
            //     right: -86px;
            //   }

            //   .text {
            //     width: calc(100% - 230px);
            //     margin-bottom: -24px;
            //     display: flex;
            //     flex-wrap: wrap;
            //     align-items: flex-end;
            //     justify-content: flex-end;

            //     .enName {
            //       margin-bottom: 9px;
            //     }

            //     .wire {
            //       margin-bottom: 18px;
            //     }
            //   }
            // }
          }
        }
      }
    }

    .teacherBanner {
      height: 620px;
      background: url("/static/images/home/list7.png") center 0 no-repeat;
      background-size: auto 472px;

      .content {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        padding-top: 54px;
        box-sizing: border-box;

        .title {
          color: $textColor;
          position: relative;
          margin-left: 54px;

          .dot {
            width: 9px;
            height: 9px;
            position: absolute;
            left: -13px;
            bottom: 0;

            &:nth-of-type(1) {
              background: $textColor;
              bottom: 27px;
            }

            &:nth-of-type(2) {
              background: #b86dda;
              bottom: 15px;
            }

            &:nth-of-type(3) {
              background: #fff338;
              bottom: 3px;
            }
          }

          .fir {
            font-size: 26px;
            font-weight: bold;
            color: #fff;
          }

          .sec {
            font-size: 14px;
            font-weight: 400;
            color: #fff;
          }
        }

        .list {
          height: calc(100% - 90px);
          box-sizing: border-box;
          padding: 0 40px;
          margin-top: 36px;
          background: #f9f9f9;
          position: relative;

          .swiper {
            width: 100%;
            height: 100%;

            .swiper-slide {
              color: white;

              // background: black;
              .boxImg {
                overflow: hidden;
                width: 100%;
                height: 50%;
                box-sizing: border-box;
                padding-top: 26px;
                margin-top: 24px;
                position: relative;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }

                .detail {
                  position: absolute;
                  top: 240px;
                  left: 50%;
                  transform: translate(-50%, 0);
                  width: 800px;
                  margin-top: 36px;
                  text-align: center;

                  .key {
                    font-weight: bold;
                    color: #5d5d5d;
                    line-height: 30px;
                  }

                  .val {
                    width: 800px;
                    margin: 0 auto;
                    font-size: 16px;
                    font-weight: 300;
                    color: $textColor1;
                    line-height: 28px;
                  }
                }
              }

              &.swiper-slide-active {
                .boxImg {
                  overflow: unset;
                }
              }
            }
          }

          .swiper-button-prev,
          .swiper-button-next {
            width: 69px;
            height: 81px;
            background: none;
            top: 33%;
          }

          .swiper-button-prev {
            left: -24px;
          }

          .swiper-button-next {
            right: -24px;
          }

          // .swiper-container {
          //   width: 100%;
          //   height: 100%;
          // }
          .swiper-slide {
            text-align: center;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            transition: 300ms;
            transform: scale(0.8);
          }

          .swiper-slide-active,
          .swiper-slide-duplicate-active {
            transform: scale(1);
          }
        }
      }
    }

    .campus {
      padding: 64px;
      padding-bottom: 0;

      .content {
        width: 1200px;
        // height: 1055px;
        margin: 0 auto;

        .title {
          color: $bgColor;
          position: relative;
          margin-left: 54px;

          .dot {
            width: 9px;
            height: 9px;
            position: absolute;
            left: -13px;
            bottom: 0;

            &:nth-of-type(1) {
              background: $bgColor;
              bottom: 27px;
            }

            &:nth-of-type(2) {
              background: #b86dda;
              bottom: 15px;
            }

            &:nth-of-type(3) {
              background: #fff338;
              bottom: 3px;
            }
          }

          .fir {
            font-size: 26px;
            font-weight: bold;
            color: $textColor;
          }

          .sec {
            font-size: 14px;
            font-weight: 400;
            color: $textColor1;
          }
        }

        .img {
          margin-top: 36px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          align-content: space-between;
          justify-content: space-between;

          .list5 {
            // margin-top: 1px;
            display: block;
            //  margin-top: -1px;
            margin-top: -3px;
            margin-bottom: 3px;
          }

          .list6 {
            // display: block;
            margin-right: 1px;
            margin-bottom: 4px;
            margin-left: 2px;
          }

          .list4 {
            margin-left: 3px;
            margin-bottom: 2px;
          }

          .list3 {
            margin-left: 0px;
            margin-bottom: 2px;
          }

          .list1 {
            margin-left: -2px;
            margin-bottom: 3px;
            margin-right: 2px;
          }
        }
      }
    }

    .map {
      // padding: 64px;
      margin-top: 43px;
      // & >>> .BMap_mask{

      // }
      .content {
        width: 1200px;
        // height: 1055px;
        margin: 0 auto;

        .title {
          color: $bgColor;
          position: relative;
          margin-left: 54px;

          .dot {
            width: 9px;
            height: 9px;
            position: absolute;
            left: -13px;
            bottom: 0;

            &:nth-of-type(1) {
              background: $bgColor;
              bottom: 27px;
            }

            &:nth-of-type(2) {
              background: #b86dda;
              bottom: 15px;
            }

            &:nth-of-type(3) {
              background: #fff338;
              bottom: 3px;
            }
          }

          .fir {
            font-size: 26px;
            font-weight: bold;
            color: $textColor;
          }

          .sec {
            font-size: 14px;
            font-weight: 400;
            color: $textColor1;
          }
        }

        .img {
          margin-top: 36px;
          display: flex;
          flex-wrap: wrap;
          align-items: flex-end;
          align-content: space-between;
          justify-content: space-between;

          .list5 {
            margin-top: 3px;
          }
        }
      }
    }

    // .content {
    //   width: 1200px;
    //   margin: 0 auto;
    // }
  }
}
// .swiper-button-prev,.prev{
//   z-index: 9999;
// }
/* 分页样式覆盖 */
.swiper-container1{
  ::v-deep .swiper-pagination-bullet{
    width: 30px;
    border-radius: 4px;
    margin: 0 10px;
    background-color: #ccc;

  }
  ::v-deep .swiper-pagination-bullet-active{
    background-color: #999;
  }
}
.list{
  ::v-deep .swiper-container2{
    box-sizing: border-box;
    padding: 0 10px;
  }
}
.teacherBanner{
  .swiper-button-prev.prev2{

  }
}

</style>
<style lang="scss">
.BMapLabel {
  border-color: #ccc !important;
}
</style>
